<template>
    <el-form ref="opsConf" :model="opsConf" label-width="80px" @submit.prevent="onSubmit" style="margin:20px;width:60%;min-width:600px;">
        <el-form-item label="工作目录">
            <el-input v-model="opsConf.workpath"></el-input>
        </el-form-item>
        <el-form-item label="Ansible">
            <el-input v-model="opsConf.ansiblePath"></el-input>
        </el-form-item>
        <el-form-item label="邮件通知">
        </el-form-item>
            <el-form-item label="域名">
                <el-input v-model="opsConf.emailNotify.SMTP"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
                <el-input v-model="opsConf.emailNotify.address"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="opsConf.emailNotify.password" type="password"></el-input>
            </el-form-item>

        <el-form-item label="jenkins api">
        </el-form-item>
        <el-form-item label="域名">
            <el-input v-model="opsConf.jenkinsConf.url"></el-input>
        </el-form-item>
        <el-form-item label="用户">
            <el-input v-model="opsConf.jenkinsConf.user"></el-input>
        </el-form-item>
        <el-form-item label="密码">
            <el-input v-model="opsConf.jenkinsConf.password" type="password"></el-input>
        </el-form-item>


        <el-form-item label="Prometheus">
            <el-input v-model="opsConf.prometheusUrl"></el-input>
        </el-form-item>

        <el-form-item label="k8s集群">
        </el-form-item>
        <el-form-item label="集群">

            <el-row :gutter="12">
                <el-col :span="4">
                    <el-popover
                            placement="top-start"
                            :title="k8sMessage.k8s1.name"
                            width="200"
                            trigger="hover"
                            :content="k8sMessage.k8s1.apiserver">

                        <el-card shadow="hover" :body-style="k8slogo" slot="reference">
                            1
                        </el-card>

                    </el-popover>

                </el-col>
                <el-col :span="4">
                    <el-card shadow="hover" :body-style="k8sPlusLogo" >
                        <i class="el-icon-plus" ></i>
                    </el-card>

                </el-col>

            </el-row>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">保存</el-button>
            <el-button>应用</el-button>
        </el-form-item>



    </el-form>
</template>

<script>
    export default {
        data() {
            return {
                opsConf: {
                    workpath: '/data/opstorm/ansible',
                    ansiblePath: '/usr/bin/ansible',
                    emailNotify: {
                        SMTP: "test@company.com:465",
                        address: "name@company.com",
                        password: "12345678910a"
                    },
                    jenkinsConf: {
                        url: "jenkins.company.com",
                        user: "admin",
                        password: "12345678910a"
                    },
                    prometheusUrl: "192.168.1.201:9090",

                },
                k8slogo: {
                    backgroundImage: "url(" + require("../../assets/img/k8s.jpg") + ")" ,
                    backgroundSize: "100% 100%",
                    backgroundRepeat: "no-repeat",
                    color: "white",
                },
                k8sPlusLogo: {
                    backgroundImage: "url(" + require("../../assets/img/plus2.jpg") + ")" ,
                    backgroundSize: "100% 100%",
                    backgroundRepeat: "no-repeat",
                    color: "white",
                },
                k8sMessage: {
                    k8s1: {
                        name: "k8s-prod",
                        apiserver: "Apiserver: https:192.168.3.57:6443"
                    }
                }
            }
        },
        methods: {
            onSubmit() {
                console.log('submit!');
            }
        }
    }

</script>